<template>
  <view class="news-list-page">
    <!-- 分类筛选 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          class="category-item" 
          v-for="(category, index) in categories" 
          :key="index"
          :class="{ 'active': activeCategory === category.id }"
          @click="switchCategory(category.id)"
        >
          {{ category.name }}
        </view>
      </scroll-view>
    </view>
    
    <!-- 资讯列表 -->
    <view class="news-list">
      <view 
        class="news-item" 
        v-for="(news, index) in filteredNewsList" 
        :key="index"
        @click="navigateToDetail(news.newsId)"
      >
        <!-- 置顶标识 -->
        <view v-if="news.isTop === '1'" class="top-tag">置顶</view>
        
        <image :src="news.coverImage" class="news-image" mode="aspectFill"></image>
        <view class="news-info">
          <view class="news-title">{{ news.newsTitle }}</view>
          <view class="news-summary">{{ news.newsSummary }}</view>
          <view class="news-meta">
            <text class="source">{{ news.author }}</text>
            <text class="time">{{ formatTime(news.publishTime) }}</text>
            <text class="read-count">
              <uni-icons type="eye" size="20" color="#999"></uni-icons>
              {{ news.viewCount }}
            </text>
          </view>
          <!-- 新闻类型标签 -->
          <view class="news-type-tag" :class="'type-' + news.newsType">
            {{ getNewsTypeName(news.newsType) }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="filteredNewsList.length === 0 && !isLoading" class="empty-state">
      <text>暂无相关新闻</text>
    </view>
  </view>
</template>

<script>
import { getNewsList, getNewsCategories } from '@/api/news.js'

export default {
  data() {
    return {
      categories: [],
      activeCategory: null,
      newsList: [],
      pageNum: 1,
      pageSize: 10,
      totalPages: 1,
      isLoading: false,
      hasMore: true
    }
  },
  computed: {
    // 过滤只显示正常状态的新闻
    filteredNewsList() {
      return this.newsList.filter(news => news.status === '0')
    }
  },
  onLoad() {
    // 加载分类
    this.loadCategories()
    // 加载资讯列表
    this.loadNewsList()
  },
  methods: {
    // 加载分类
    async loadCategories() {
      try {
        const result = await getNewsCategories()
        this.categories = [{ id: null, name: '全部' }, ...result]
      } catch (error) {
        console.error('加载分类失败', error)
      }
    },
    
    // 加载资讯列表
    async loadNewsList(refresh = false) {
      if (this.isLoading) return
      
      this.isLoading = true
      if (refresh) {
        this.pageNum = 1
        this.newsList = []
      }
      
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        
        // 如果选择了分类，添加分类参数
        if (this.activeCategory) {
          params.newsType = this.activeCategory
        }
        
        const result = await getNewsList(params)
        console.log('API返回结果:', result); // 用于调试
        
        // 根据返回的数据结构处理数据
        const list = result.rows || []
        this.newsList = [...this.newsList, ...list]
		console.log("newsList1:",this.filteredNewsList)
        this.totalPages = Math.ceil(result.total / this.pageSize)
        this.pageNum++
        this.hasMore = this.pageNum <= this.totalPages
      } catch (error) {
        console.error('加载资讯列表失败', error)
      } finally {
        this.isLoading = false
      }
    },
    
    // 切换分类
    switchCategory(categoryId) {
      this.activeCategory = categoryId
      this.loadNewsList(true) // 重新加载第一页
    },
    
    // 跳转到详情页
    navigateToDetail(newsId) {
		console.log("newsId"+newsId) //调试
      uni.navigateTo({
        url: `/pages/news/detail?id=${newsId}`
      })
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    },
    
    // 获取新闻类型名称
    getNewsTypeName(type) {
      const typeMap = {
        '1': '行业动态',
        '2': '政策解读',
        '3': '职场指南'
      }
      return typeMap[type] || '未知类型'
    }
  }
}
</script>

<style scoped>
.news-list-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 分类筛选样式 */
.category-bar {
  background-color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.category-scroll {
  white-space: nowrap;
  width: 100%;
}

.category-item {
  display: inline-block;
  padding: 5px 15px;
  margin: 0 5px;
  font-size: 14px;
  color: #666;
  border-radius: 20px;
  background-color: #f0f0f0;
}

.category-item.active {
  background-color: #36D;
  color: #fff;
}

/* 新闻列表样式 */
.news-list {
  padding: 10px 15px;
}

.news-item {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 置顶标识 */
.top-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  z-index: 1;
  border-radius: 0 0 4px 0;
}

.news-image {
  width: 120px;
  height: 90px;
  flex-shrink: 0;
  background-color: #f0f0f0;
}

.news-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-summary {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 5px 0;
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.source {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  margin: 0 10px;
}

.read-count {
  display: flex;
  align-items: center;
}

/* 新闻类型标签 */
.news-type-tag {
  align-self: flex-start;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 5px;
}

.news-type-tag.type-1 {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.news-type-tag.type-2 {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.news-type-tag.type-3 {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
</style>
